import { PureComponent } from "react";
import { DatePicker } from "antd-mobile";
import MToast from "../../Util/MToast"
import { isNull } from "../../../utils/helper"
import moment from "moment"
import MIcon from "../../MIcon"
interface Props {
	value: any,
	is_now?: any,
	value_datatype?: string,
	format?: string,
	onChange: Function,
	label?: string,
	required?: any,
	disabled?: any,
	show_label?: any,
	tips?: string,
	hasError: boolean,
	errorMsg: string,
}
interface State {
	value: any
}
export default class MyTime extends PureComponent<Props, State> {
	public state: State = {
		value: this.props.value
	}
	componentWillReceiveProps(nextProps: Props) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let value = nextProps.value;
			if (isNull(value)) {
				if (value === undefined) {
					let { is_now, value_datatype = "string" } = nextProps;
					let isNumber = value_datatype === "number";
					if (is_now == 1) {
						if (isNumber) {
							let now = moment();
							this.changeValue(now)
						}
						else {
							this.changeValue(moment())
						}
					}
				}
			}
			this.setState({
				value
			});
		}
	}
	changeValue = (value) => {
		const { value_datatype = "string", format = "HH:mm" } = this.props;
		let isNumber = value_datatype === "number";
		if (isNull(value)) {

		}
		else {
			if (isNumber) {
				value.millisecond(0);
				if (format == "HH") {
					value.minute(0).second(0)
				}
				if (format == "HH:mm") {
					value.second(0)
				}
				let today = moment().hour(0).minute(0).second(0).millisecond(0);
				value = (value.valueOf() - today.valueOf()) / 1000;
			}
			else {
				value = value.format(format)
			}
		}
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	onChange = (value) => {
		value = moment(value);
		this.changeValue(value);
	};

	componentDidMount() {
		let { is_now = 0, value_datatype = "string" } = this.props;
		let { value } = this.state;
		let isNumber = value_datatype === "number";
		if (isNull(value)) {
			if (is_now == 1) {
				if (isNumber) {
					let now = moment();
					this.changeValue(now)
				}
				else {
					this.changeValue(moment())
				}
			}
		}
	}
	render() {
		let { label, required, disabled, show_label, tips, value_datatype, hasError, errorMsg, format = "HH:mm" } = this.props;
		let isDisabled = disabled == 1;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let isRequired = required == 1;
		let { value } = this.state;
		let isNumber = value_datatype === "number";
		if (isNull(value)) {

		}
		else {
			if (isNumber) {
				let h = parseInt((value / 3600).toString());
				let m = parseInt(((value % 3600) / 60).toString());
				let s = 0;
				value = moment(h + ":" + m + ":" + s, format)
			}
			else {
				value = moment(value, format)
			}
			value = value._d
		}
		return (
			<DatePicker
				disabled={isDisabled}
				title={label}
				onChange={this.onChange}
				value={value}
				mode="time"
			>
				<PickerLabel {...this.props} label={label} tips={tips} isShowLabel={isShowLabel} isRequired={isRequired} hasError={hasError} errorMsg={errorMsg} disabled={isDisabled} />
			</DatePicker>
		)
	}
}

interface PickerLabelProps extends Props {
	onClick?: Function,
	extra?: any,
	isRequired: boolean,
	isShowLabel: boolean,
	label_width?: any,
	label_text_color?: string,
	label_text_align?: any
}
class PickerLabel extends PureComponent<PickerLabelProps>{
	onClick = () => {
		let { onClick } = this.props;
		if (onClick) {
			onClick()
		}
	};
	render() {
		let { extra, label, tips, isRequired, isShowLabel, hasError, errorMsg, label_width, disabled, label_text_color, label_text_align = "left" } = this.props;
		let requiredClass = "am-list-item am-input-item am-list-item-middle";
		if (isRequired) {
			requiredClass += " required"
		}
		if (!isNull(label_text_align)) {
			requiredClass += " label-text-align-" + label_text_align
		}
		if (hasError) {
			requiredClass += " am-input-error"
		}
		let onExtraClick = () => {
			MToast.info(tips, 2, null, false)
		};
		let labelClass = "am-input-label am-input-label-";
		if (isNull(label_width)) {
			labelClass += "3"
		}
		else {
			labelClass += label_width
		}
		return (
			<div>
				<div className={requiredClass} style={{ fontSize: "16px" }} onClick={(e) => {
					this.onClick()
				}} data-flex="box:first">
					{
						isShowLabel ? <div className={labelClass} style={{ color: label_text_color }}>
							{label}
						</div> : <div></div>
					}
					<div style={{ color: "#888" }} className="am-list-line" data-flex="dir:right">
						<span className="am-input-extra" onClick={(e) => {
							e.stopPropagation();
							onExtraClick();
						}}
						>
						</span>
						<div className="am-input-error-extra mi" onClick={(e) => {
							e.stopPropagation();
							MToast.info(errorMsg, 2, null, false)
						}}></div>
						{
							!disabled && <MIcon type="xiayiye" style={{ color: "rgb(187, 187, 187)" }} />
						}
						<span style={{ color: isNull(this.props.value) ? "rgb(187,187,187)" : "#000" }}>
							{extra}
						</span>
					</div>
				</div>
				{
					tips && <p className="tipsStyle">{tips}</p>
				}
			</div>
		)
	}
}
